<template>
  <div class="container"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

onMounted(() => {
  const container = document.querySelector(".container") as HTMLElement;

  if (container) {
    // 获取容器的边界信息
    const rect = container.getBoundingClientRect();
    // 计算容器宽高比对应的角度
    const theta = Math.atan2(rect.height / 2, rect.width / 2);

    container.addEventListener("mouseenter", handleMouseEnter);
    container.addEventListener("mouseout", handleMouseOut);

    // 定义处理鼠标移除事件的函数，并添加类型注解
    function handleMouseOut(_event: MouseEvent) {
      // 处理鼠标移除事件的逻辑
      console.log("鼠标移出");
      container.className = "container";
    }

    // 添加鼠标移除事件的监听器
    // container.onmouseleave=()=>container.className =container;
    function handleMouseEnter(event: MouseEvent) {
      // 计算鼠标位置相对于容器中心的x和y坐标
      const x = event.clientX - rect.left - rect.width / 2;
      const y = event.clientY - rect.top - rect.height / 2;
      // 计算鼠标与容器中心连线的角度（弧度制）
      const angle = Math.atan2(y, x);

      // 根据角度判断鼠标进入的方向
      if (angle >= -theta && angle < theta) {
        console.log("right"); // 右边或接近右边
        container?.classList.add("right");
      } else if (angle >= 0 && angle < Math.PI / 2) {
        container?.classList.add("bottom");
        console.log("bottom"); // 底部或接近底部
      } else if (angle >= -Math.PI / 2 && angle < 0) {
        console.log("top"); // 顶部或接近顶部
        container?.classList.add("top");
      } else {
        console.log("left"); // 左边或接近左边
        container?.classList.add("left");
      }
    }
  }
});
</script>

<style lang="scss" scoped>
.container {
  width: 300px;
  height: 200px;
  background: #618;
  margin: auto;
  margin-top: 200px;
}
</style>
